<template>
    <div class="comment-item-wrap">
        <div class="left">
            <img class="user-img" :src="props.data?.icon || config.defaultImg" alt="">
        </div>
        <div class="right">
            <el-row>
                <el-col :span="20">
                    <p class="name">{{props.data?.userName}}</p>
                </el-col>
                <el-col :span="4" class="flex-end">
                    <!-- 评论只有创建人能删除 -->
                    <el-popover
                        v-if="isCreater"
                        placement="bottom-end"
                        width="74px"
                        trigger="click"
                        popper-class="more-popover">
                        <template #reference>
                            <el-button  class="more-option-btn" link>
                                <i class="iconfont icon-gengduo"></i>
                            </el-button>
                        </template>
                        <ul class="more-popover-list">
                            <li @click="onDelete">移除</li>
                        </ul>
                    </el-popover>
                </el-col>
            </el-row>
            <Star class="rate" :score="props.data?.score || 0" :size="14" :disabled="true" :space="4"/>
            <p class="content">{{props.data?.comment}}</p>
            <p class="time" v-if="props.data?.submitTime">{{ dealDynamicTime(props.data?.submitTime) }}</p>
        </div>
    </div>
</template>

<script setup>
import config from '@/global/config';
import Star from '@/components/star/star.vue';
import { dealDynamicTime } from '@/lib/tools';
import Confirm from '@/components/confirm/confirm.js';
import { useRoute } from 'vue-router';
import { useStore } from 'vuex';
import { computed } from 'vue';

const store= useStore();

const route = useRoute();

const emit = defineEmits(['update:list']);

const props = defineProps({
    data: {
        type: Object,
        default: () => {}
    },
    isCreater: {
        type: Boolean,
        default: false
    },
    assessAppraiseId: {
        type: String, 
        default: ''
    },
    isPreview: { // 是否是预览状态
        type: Boolean,
        default: false 
    }
});

// 预览状态下不能删除评论
function onDelete () {
    if (!props.assessAppraiseId || !route.params?.moocId || !props.data?.userId) {
        return
    }
    if (props.isPreview) {
        G_dispatchEvent('toast', { message: '预览状态下不可操作', type: 'error'});
        return
    }
    Confirm({
        title: '确认移除',
        text: '本条评价移除后将不在评价列表展示，后台可以查看'
    }).then(ret => {
        G_transmit('deleteCourseComment', {
            data: {
                assessAppraiseId: props.assessAppraiseId, // 慕课问卷评价id
                moocId: route.params.moocId, // 慕课Id
                userIdList: [props.data?.userId], // 删除的用户id
            }
        }).then((res) => {
            G_dispatchEvent('toast', { message: '移除成功', type: 'success'});
            emit('update:list');
        }).catch(_err => {
            console.log(_err);
        })
       
    }).catch(err => {
        // 点击取消按钮触发
        if (err === 'cancel') {
          return false
        }
    })
}
</script>

<style lang="scss" scoped>
.comment-item-wrap {
    display: flex;
    font-size: 14px;
    font-family: MicrosoftYaHei;
    padding: 20px 0 0;
    .left {
        width: 52px;
        margin-right: 14px;
        .user-img {
            width: 52px;
            height: 52px;
            border-radius: 50%;
        }
    }
    .right {
        flex: 1;
        border-bottom: 1px solid #E0E2E4;
        .flex-end {
            display: flex;
            justify-content: flex-end;
        }
        .name {
            margin-top: 6px;
            color: #191919;
            line-height: 14px;
        }
        .content {
            margin-top: 16px;
            color: var(--srt-main-text-color);
            line-height: 21px;
            word-break: break-all;
        }
        .rate {
            margin-top: 12px;
        }
        .time {
            margin-top: 10px;
            color: var(--srt-color-light-gray);
            line-height: 19px;
            padding-bottom: 20px;
        }
    }
    &:last-child {
        .right {
            border-bottom: none;
        }
        .time {
            padding-bottom: 0;
        }
    }
}
.more-popover-list {
    li {
        font-size: 14px;
        line-height: 32px;
        font-family: MicrosoftYaHei;
        color: var(--srt-main-text-color);
        text-align: center;
        cursor: pointer;
        &:hover {
            background: #E7F1FF;
            border-radius: 4px;
        }
    }
}
</style>

<style lang="scss">
.more-popover {
    min-width: 74px!important;
    right: -8px!important;
    top: -9px!important;
    padding: 6px !important;
    border: none!important;
    box-shadow: 0px 2px 6px 0px rgba(0, 0 ,0 , 0.1) !important;
    .el-popper__arrow {
        display: none;
    }
}
.more-option-btn {
    border: none;
    padding: none;
    color: var(--srt-main-text-color);
    .iconfont {
        &:hover {
            color: var(--srt-color-primary);
        }
    }
}
</style>